import React, {useState, useEffect} from 'react'
import { Toast } from 'react-vant'
import NavBar from '@components/NavBar'
import QRCode from 'qrcode'
import copy from 'copy-to-clipboard';
import './index.less'

const Recharge = (props) => {
  const [code, setCode] = useState(null)

  useEffect(() => {
    getQRCodePic(props.state.addressTwo)
  }, [])

  const getQRCodePic = (text) => {
    QRCode.toDataURL(text, (err, url) => {
      if (err) {
        console.log(err);
        return;
      }
      setCode(url)
    });
  }

  return (
    <>
      <div className="background"></div>
      <div className="recharge">
        <NavBar title="充值" />
        <div className="recharge-content">
          <div className="recharge-code">
            <img src={code} alt=""/>
          </div>
          <div className="recharge-address">{props.state.addressTwo}</div>
          <button className="copy-btn" onClick={() => {
            copy(props.state.addressTwo)
            Toast.success('复制成功')
          }}>复制</button>
        </div>
      </div>
    </>
  )
}

export default Recharge;